<template>
  <!-- 单选checkBox -->
  <u-checkbox-group v-model="list">
    <u-checkbox
      v-for="{ value } of options"
      :key="value"
      :name="value"
      :label="title"
    ></u-checkbox>
  </u-checkbox-group>
</template>
<script setup lang="ts">
import { ref, computed, watch } from "vue";
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  checked: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:checked"]);

const value = "VALUE";

const list = ref([] as string[]);

const isChecked = computed({
  get() {
    return list.value.includes(value);
  },
  set(n) {
    if (n) {
      list.value = [value];
    } else {
      list.value = [];
    }
  },
});

const options = ref([
  {
    value,
    name: value,
  },
]);

watch(
  () => props.checked,
  (n) => {
    if (n !== isChecked.value) {
      isChecked.value = n;
    }
  },
  {
    immediate: true,
  },
);

watch(isChecked, (n) => {
  if (n !== props.checked) {
    emits("update:checked", n);
  }
});
</script>
